<template>
	<view>
		<uNavbar title="注销账号" bgColor="transparent"></uNavbar>

		<view class="cancell flex_ZC">
			<image src="../../static/icon/i_tip.png" mode=""></image>
			<text>申请注销福合宇宙账户</text>
		</view>
		<view class="careful flex_Z">
			<text>注意事项:</text>
			<view class="careful_box flex_Z">
				<text class="f30 c0">财产事项</text>
				<text class="f28 c4">注销后账号所有商品全部清除</text>
			</view>
			<view class="careful_box flex_Z">
				<text class="f30 c0">账号事项</text>
				<text class="f28 c4">注销后账号内所有数据全部清空</text>
			</view>
			<view class="careful_box flex_Z">
				<text class="f30 c0">注意事项</text>
				<text class="f28 c4">注销后数据及藏品不可找回</text>
			</view>
		</view>
		<view class="log_out  flex_c" @click="tipShow = true">
			<text>申请注销</text>
		</view>

		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36 marb">提示</text>
				<text class="prompt_tit">注销后账号内所有数据全部清空,</text>
				<text class="prompt_tit">确定注销账号？</text>
				<view class="prompt_ntm" @click="changeCancellation">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {changeLogoff} from "../../api/setting.js";
	export default {
		data() {
			return {
				tipShow: false
			}
		},
		onLoad() {

		},
		methods: {
			changeCancellation() {
				uni.$u.toast('注销成功');
				changeLogoff().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.tipShow = false
						uni.$u.toast('注销成功');
						uni.clearStorageSync() //清除所有缓存
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1500)
					}
				})
			}
		},
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	.cancell {
		width: 100%;
		height: 200rpx;
		margin-top: 100rpx;
	}

	.cancell>image {
		width: 80rpx;
		height: 80rpx;
	}

	.cancell>text {
		font-size: 36rpx;
		color: #ffffff;
		margin-top: 20rpx;
	}

	.careful {
		width: 690rpx;
		height: 486rpx;
		background: #3C2F65;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.careful>text {
		font-size: 34rpx;
		color: #ffffff;
		margin: 28rpx 0 0 24rpx;
	}

	.careful_box {
		margin: 30rpx 24rpx;
	}


	.log_out {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
	}

	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.prompt {
		width: 600rpx;
		/* min-height: 400rpx; */
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}
	.marb{
		margin-bottom: 50rpx;
	}

	.prompt>text {
		margin-top: 10rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #A6A5AF;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 28rpx;
		margin-top: 60rpx;
	}
</style>